<template>
    <div class="box">
        <!-- 一行两个 -->
        <div
            class="square"
            v-if="props.options.tabs == '2' && (props.options.imgList.length > 1 || props.options.imgList[0].imgurl)"
            :style="{
                'margin-bottom': props.options
                    ? props.options.space
                        ? props.options.space + 'px'
                        : 0 + 'px'
                    : 0 + 'px',
                'padding-left':
                    props.options.btwSpace == 0 || props.options.btwSpace ? props.options.btwSpace + 'px' : '16px',
                'padding-right':
                    props.options.btwSpace == 0 || props.options.btwSpace ? props.options.btwSpace + 'px' : '16px',
                'padding-bottom':
                    props.options.hwSpace == 0 || props.options.hwSpace ? props.options.hwSpace + 'px' : '16px',
                'padding-top':
                    props.options.hwSpace == 0 || props.options.hwSpace ? props.options.hwSpace + 'px' : '16px'
            }">
            <div
                class="item"
                v-for="(item, index) in props.options.imgList"
                :key="index"
                @click="jump(item)"
                :style="{
                    width: `calc(50% - ${
                        props.options.imgSpace == 0 || props.options.imgSpace ? props.options.imgSpace / 2 : 10
                    }px)`,
                    'margin-top':
                        index > 1
                            ? `${props.options.imgSpace == 0 || props.options.imgSpace ? props.options.imgSpace : 10}px`
                            : '0px',
                    'margin-right':
                        index % 2 == 0
                            ? `${props.options.imgSpace == 0 || props.options.imgSpace ? props.options.imgSpace : 10}px`
                            : '0px'
                }">
                <div class="search_contain">
                    <div
                        class="search_img content"
                        :style="{
                            height: swiperHeight,
                            'border-radius': `${props.options.cornerType == 2 ? 8 : 0}px`
                        }">
                        <image
                            mode="widthFix"
                            webp
                            :src="getOssImg(item.imgurl) || defaultImg"
                            v-if="item.imgurl"
                            :id="'scroll' + index"
                            @load="getHeight(index, $event)"></image>
                        <img src="../../assets/mall/images.png" v-else />
                    </div>
                </div>
            </div>
        </div>
        <!-- props.options.hwSpace == 0 || props.options.hwSpace为了兼容历史数据 -->
        <div
            class="square"
            v-if="
                !Object.keys(props.options).length ||
                (props.options.tabs == '2' && props.options.imgList.length == 1 && !props.options.imgList[0].imgurl)
            "
            :style="{
                'margin-bottom': props.options
                    ? props.options.space
                        ? props.options.space + 'px'
                        : 0 + 'px'
                    : 0 + 'px',
                'padding-left':
                    props.options.btwSpace == 0 || props.options.btwSpace ? props.options.btwSpace + 'px' : '16px',
                'padding-right':
                    props.options.btwSpace == 0 || props.options.btwSpace ? props.options.btwSpace + 'px' : '16px',
                'padding-bottom':
                    props.options.hwSpace == 0 || props.options.hwSpace ? props.options.hwSpace + 'px' : '16px',
                'padding-top':
                    props.options.hwSpace == 0 || props.options.hwSpace ? props.options.hwSpace + 'px' : '16px'
            }">
            <div
                class="item"
                v-for="item in 2"
                :key="item"
                :style="{
                    width: `calc(50% - ${
                        props.options.imgSpace == 0 || props.options.imgSpace ? props.options.imgSpace / 2 : 10
                    }px)`,
                    'margin-right':
                        item % 2 == 1
                            ? `${props.options.imgSpace == 0 || props.options.imgSpace ? props.options.imgSpace : 10}px`
                            : '0px'
                }">
                <div class="search_contain">
                    <div
                        class="search_img emptyimg content"
                        :style="{
                            'border-radius': `${props.options.cornerType == 2 ? 8 : 0}px`
                        }">
                        <img src="../../assets/mall/images.png" />
                    </div>
                </div>
            </div>
        </div>
        <!-- 一行一个 -->
        <div
            class="square"
            :style="{
                'margin-bottom': props.options
                    ? props.options.space
                        ? props.options.space + 'px'
                        : 0 + 'px'
                    : 0 + 'px',
                'padding-left':
                    props.options.btwSpace == 0 || props.options.btwSpace ? props.options.btwSpace + 'px' : '16px',
                'padding-right':
                    props.options.btwSpace == 0 || props.options.btwSpace ? props.options.btwSpace + 'px' : '16px',
                'padding-bottom':
                    props.options.hwSpace == 0 || props.options.hwSpace ? props.options.hwSpace + 'px' : '16px',
                'padding-top':
                    props.options.hwSpace == 0 || props.options.hwSpace ? props.options.hwSpace + 'px' : '16px'
            }"
            v-if="props.options.tabs == 1 && !props.options.imgList.length">
            <div
                class="item content"
                v-for="item in 1"
                :key="item"
                :style="{
                    'border-radius': `${props.options.cornerType == 2 ? 8 : 0}px`
                }">
                <div style="text-align: center"><img class="imgcontent" src="../../assets/mall/images.png" /></div>
            </div>
        </div>
        <div
            class="square"
            v-if="props.options.tabs == 1 && props.options.imgList.length"
            :style="{
                'margin-bottom': props.options
                    ? props.options.space
                        ? props.options.space + 'px'
                        : 0 + 'px'
                    : 0 + 'px',
                'padding-left':
                    props.options.btwSpace == 0 || props.options.btwSpace ? props.options.btwSpace + 'px' : '16px',
                'padding-right':
                    props.options.btwSpace == 0 || props.options.btwSpace ? props.options.btwSpace + 'px' : '16px',
                'padding-bottom':
                    props.options.hwSpace == 0 || props.options.hwSpace ? props.options.hwSpace + 'px' : '16px',
                'padding-top':
                    props.options.hwSpace == 0 || props.options.hwSpace ? props.options.hwSpace + 'px' : '16px'
            }">
            <swiper
                class="swiper"
                autoplay="true"
                interval="5000"
                :circular="true"
                :style="{ height: oneLineImgHeight }">
                <template v-if="imgShow">
                    <swiper-item
                        v-for="(item, index) in props.options.imgList"
                        :key="index + props.options.cornerType"
                        :style="{
                            'border-radius': `${props.options.cornerType == 2 ? 8 : 0}px`
                        }"
                        @click="jump(item)"
                        class="content">
                        <template v-if="item.imgurl">
                            <!-- 第二张上传的图片比第一张高度大时，第二张图片保持和第一张高度一致，居中裁剪展示 -->
                            <image
                                webp
                                mode="widthFix"
                                v-if="index == 0"
                                :src="getOssImg(item.imgurl) || defaultImg"
                                class="imgcontent"
                                :style="{ height: oneLineImgHeight }"
                                :id="'scroll' + index"
                                @load="getHeight(index, $event, 'first')"></image>
                            <image
                                v-else
                                webp
                                mode="widthFix"
                                :src="getOssImg(item.imgurl) || defaultImg"
                                class="imgcontent"
                                :id="'scroll' + index"
                                @load="getHeight(index, $event, 'first')"></image>
                        </template>
                        <div v-else><img src="../../assets/mall/images.png" class="imgcontent" /></div>
                    </swiper-item>
                </template>
            </swiper>
        </div>
        <!-- 一行三个 -->
        <div
            class="square"
            v-if="props.options.tabs == '3' && (props.options.imgList.length > 1 || props.options.imgList[0].imgurl)"
            :style="{
                'margin-bottom': props.options
                    ? props.options.space
                        ? props.options.space + 'px'
                        : 0 + 'px'
                    : 0 + 'px',
                'padding-left':
                    props.options.btwSpace == 0 || props.options.btwSpace ? props.options.btwSpace + 'px' : '16px',
                'padding-right':
                    props.options.btwSpace == 0 || props.options.btwSpace ? props.options.btwSpace + 'px' : '16px',
                'padding-bottom':
                    props.options.hwSpace == 0 || props.options.hwSpace ? props.options.hwSpace + 'px' : '16px',
                'padding-top':
                    props.options.hwSpace == 0 || props.options.hwSpace ? props.options.hwSpace + 'px' : '16px'
            }">
            <div
                class="item thirditem"
                v-for="(item, index) in props.options.imgList"
                :key="index"
                @click="jump(item)"
                :style="{
                    width: `calc(33% - ${
                        props.options.imgSpace == 0 || props.options.imgSpace
                            ? Math.ceil((props.options.imgSpace * 2) / 3)
                            : 10
                    }px)`,
                    'margin-top':
                        index > 2
                            ? `${props.options.imgSpace == 0 || props.options.imgSpace ? props.options.imgSpace : 10}px`
                            : '0px',
                    'margin-right':
                        index % 3 == 0 || index % 3 == 1
                            ? `${props.options.imgSpace == 0 || props.options.imgSpace ? props.options.imgSpace : 10}px`
                            : '0px'
                }">
                <div class="search_contain">
                    <div
                        class="search_img content"
                        v-if="item.imgurl"
                        :style="{
                            height: swiperHeight,
                            'border-radius': `${props.options.cornerType == 2 ? 8 : 0}px`
                        }">
                        <image
                            class="search_sigle"
                            webp
                            :src="getOssImg(item.imgurl) || defaultImg"
                            mode="widthFix"
                            :id="'scroll' + index"
                            @load="getHeight(index, $event)"></image>
                    </div>
                    <div
                        class="search_img emptyimg content"
                        v-else
                        :style="{
                            'border-radius': `${props.options.cornerType == 2 ? 8 : 0}px`
                        }">
                        <img src="../../assets/mall/images.png" />
                    </div>
                </div>
            </div>
            <template v-if="props.options.imgList.length % 3">
                <div v-for="item in 3 - (props.options.imgList.length % 3)" :key="item" class="thirditem"></div>
            </template>
        </div>
        <div
            class="square"
            v-if="props.options.tabs == '3' && props.options.imgList.length == 1 && !props.options.imgList[0]?.imgurl"
            :style="{
                'margin-bottom': props.options
                    ? props.options.space
                        ? props.options.space + 'px'
                        : 0 + 'px'
                    : 0 + 'px',
                'padding-left':
                    props.options.btwSpace == 0 || props.options.btwSpace ? props.options.btwSpace + 'px' : '16px',
                'padding-right':
                    props.options.btwSpace == 0 || props.options.btwSpace ? props.options.btwSpace + 'px' : '16px',
                'padding-bottom':
                    props.options.hwSpace == 0 || props.options.hwSpace ? props.options.hwSpace + 'px' : '16px',
                'padding-top':
                    props.options.hwSpace == 0 || props.options.hwSpace ? props.options.hwSpace + 'px' : '16px'
            }">
            <div
                class="item thirditem"
                v-for="item in 3"
                :key="item"
                :style="{
                    width: `calc(33% - ${
                        props.options.imgSpace == 0 || props.options.imgSpace
                            ? Math.ceil((props.options.imgSpace * 2) / 3)
                            : 10
                    }px)`,
                    'margin-right':
                        item % 3 == 1 || item % 3 == 2
                            ? `${props.options.imgSpace == 0 || props.options.imgSpace ? props.options.imgSpace : 10}px`
                            : '0px'
                }">
                <div class="search_contain">
                    <div
                        class="search_img emptyimg content"
                        :style="{
                            'border-radius': `${props.options.cornerType == 2 ? 8 : 0}px`
                        }">
                        <img src="../../assets/mall/images.png" />
                    </div>
                </div>
            </div>
        </div>
        <!-- 滑动 -->
        <div
            :catchtouchmove="true"
            class="square"
            v-if="props.options.tabs == '4' && (props.options.imgList.length > 1 || props.options.imgList[0]?.imgurl)"
            :style="{
                'margin-bottom': props.options
                    ? props.options.space
                        ? props.options.space + 'px'
                        : 0 + 'px'
                    : 0 + 'px',
                padding: 0
            }">
            <scroll-view
                scroll-x="true"
                @scroll="scroll"
                class="scroll-view_H"
                :style="{
                    'padding-left':
                        props.options.btwSpace == 0 || props.options.btwSpace ? props.options.btwSpace + 'px' : '16px',
                    'padding-right':
                        props.options.btwSpace == 0 || props.options.btwSpace ? props.options.btwSpace + 'px' : '16px',
                    'padding-bottom':
                        props.options.hwSpace == 0 || props.options.hwSpace ? props.options.hwSpace + 'px' : '16px',
                    'padding-top':
                        props.options.hwSpace == 0 || props.options.hwSpace ? props.options.hwSpace + 'px' : '16px'
                }">
                <div
                    class="scroll-view-item_H four-img"
                    :style="{
                        height: swiperHeight,
                        lineHeight: swiperHeight,
                        'border-radius': `${props.options.cornerType == 2 ? 8 : 0}px`,
                        'margin-right': `${
                            props.options.imgSpace == 0 || props.options.imgSpace ? props.options.imgSpace : 10
                        }px`
                    }"
                    v-for="(item, index) in props.options.imgList"
                    :key="index"
                    @click="jump(item)">
                    <image
                        v-if="item.imgurl"
                        webp
                        :src="getOssImg(item.imgurl) || defaultImg"
                        mode="widthFix"
                        class="image-square image-content"
                        :id="'scroll' + index"
                        @load="getHeight(index, $event)"></image>
                    <img v-else src="../../assets/mall/images.png" class="image-square" />
                </div>
            </scroll-view>
        </div>
        <div
            :catchtouchmove="true"
            class="square"
            v-if="props.options.tabs == '4' && props.options.imgList.length == 1 && !props.options.imgList[0]?.imgurl"
            :style="{
                'margin-bottom': props.options
                    ? props.options.space
                        ? props.options.space + 'px'
                        : 0 + 'px'
                    : 0 + 'px',
                padding: 0
            }">
            <scroll-view
                scroll-x="true"
                @scroll="scroll"
                class="scroll-view_H"
                :style="{
                    'padding-left':
                        props.options.btwSpace == 0 || props.options.btwSpace ? props.options.btwSpace + 'px' : '16px',
                    'padding-right':
                        props.options.btwSpace == 0 || props.options.btwSpace ? props.options.btwSpace + 'px' : '16px',
                    'padding-bottom':
                        props.options.hwSpace == 0 || props.options.hwSpace ? props.options.hwSpace + 'px' : '16px',
                    'padding-top':
                        props.options.hwSpace == 0 || props.options.hwSpace ? props.options.hwSpace + 'px' : '16px'
                }">
                <div
                    class="scroll-view-item_H emptyimg four-img"
                    v-for="item in 3"
                    :key="item"
                    @click="jump(item)"
                    :style="{
                        'border-radius': `${props.options.cornerType == 2 ? 8 : 0}px`,
                        'margin-right': `${
                            props.options.imgSpace == 0 || props.options.imgSpace ? props.options.imgSpace : 10
                        }px`
                    }">
                    <img src="../../assets/mall/images.png" class="image-square" />
                </div>
            </scroll-view>
        </div>
    </div>
</template>
<script setup name="images">
import { nextTick } from 'process';
import { ref, getCurrentInstance, onUnmounted, watch, computed } from 'vue';
import defaultImg from '../../assets/mall/errorImg.png';
import { getOssImg } from '../../commons/utils.js';
const instance = getCurrentInstance();
const emit = defineEmits(['jump']);
let swiperHeight = ref('130px');
let oneLineImgHeight = ref('200px'); //单行滑动默认高度
let props = defineProps({
    options: {
        type: Object,
        default: () => {
            return {};
        }
    },
    isUniapp: {
        type: Boolean,
        default: false
    }
});
const jump = item => {
    if (props.isUniapp) {
        emit('jump', item);
    }
};

let imgShow = ref(true);
const options = computed(() => {
    return {
        cornerType: props?.options?.cornerType,
        btwSpace: props?.options?.btwSpace
    };
});
watch(
    () => options,
    value => {
        imgShow.value = false;
        // keyItem.value = new Date().getTime();
        nextTick(() => {
            imgShow.value = true;
        });
    },
    {
        deep: true,
        immediate: true
    }
);

const getHeight = (index, e, param) => {
    if (index == 0) {
        uni.createSelectorQuery()
            .in(instance)
            .select('#scroll0')
            .boundingClientRect(data => {
                // 图片原始宽高
                let originalWidth = e.detail.width;
                let originalHeight = e.detail.height;
                let boxWidth = data?.width;

                // todo: 计算方式1 暂时注释，后续没问题可删除
                // let widthScale = originalWidth / boxWidth;
                // let boxHeight = originalHeight / widthScale;

                // 图片原始宽高比
                let ratio = originalHeight / originalWidth;
                let boxHeight = boxWidth * ratio;
                if (param) {
                    // 获取图广单行滑动的图片高度
                    oneLineImgHeight.value = data ? `${boxHeight}px` : '200px';
                } else {
                    swiperHeight.value = data ? `${boxHeight}px` : '130px';
                }
            })
            .exec();
    }
};
</script>
<style lang="scss" scoped>
.box {
    ::-webkit-scrollbar {
        width: 0;
        height: 0;
        background-color: transparent;
    }
    display: flex;
    flex-wrap: wrap;
    .scroll-view_H {
        white-space: nowrap;
        box-sizing: border-box;
    }
    .four-img {
        position: relative;
    }
    .scroll-view-item_H {
        width: 260rpx;
        height: 260rpx;
        overflow: hidden;
        display: inline-block;
        vertical-align: middle;
        background-color: #f9f9f9;
        background-clip: content-box;
        .image-square {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
        .image-content {
            width: 260rpx;
            height: 260rpx;
        }
    }
    // .thirditem {
    //     flex: 1;
    //     flex-shrink: 0;
    // }
    .content {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 200px;
        background-color: #f9f9f9;
    }
    .swiper {
        width: 100%;
    }
    .imgcontent {
        width: 100%;
        height: 100%;
    }
    .square {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        box-sizing: border-box;
        background-color: #fff;
    }

    .emptyimg {
        height: 260rpx !important;
    }
    .item {
        width: calc(100% - 10rpx);
        overflow: hidden;
        .search_contain {
            // background-color: #f2f2f2;
            .search_img {
                width: 100%;
                // height: 400rpx;
                margin-right: 18rpx;
                flex-shrink: 0;
                overflow: hidden;
                .search_sigle {
                    width: 100%;
                }
            }
        }
        .hotitem_img {
            width: 100%;
            height: 100%;
        }
        .third_detail {
            padding: 24rpx 22rpx !important;
        }
        .hotitem_detail {
            padding: 26rpx 22rpx;
            background-color: #fff;
            .third_name {
                font-size: 28rpx !important;
                height: 60rpx !important;
            }
            .hotitem_name {
                height: 70rpx;
                font-size: 32rpx;
                font-weight: 500;
                color: #333333;
                overflow: hidden;
                text-overflow: ellipsis;
                word-break: break-all;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
            }
            .third_count {
                margin-top: 20rpx;
            }
            .hotitem_count {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-top: 28rpx;
                .hotitem_car {
                    width: 40rpx;
                    height: 40rpx;
                }
                .hotitem_text {
                    font-size: 28rpx;
                    font-weight: 500;
                    color: #fe292b;
                    line-height: 28rpx;
                }
            }
        }
    }
}
</style>
